<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="common.js"></script>
</head>

<body>
    <div class="box">
        <p>
            <label for="">用户名</label>
            <input type="text" id="userName">
            <span id=user_span></span>
        </p>
        <p>
            <label for="">密&emsp;码</label>
            <input type="text" id="pwd">
            <span id="pwd_span"></span>
        </p>
        <p>
            <label for="">验证码</label>
            <input type="text" id="code" style="vertical-align:top;">
            <span id="code-create"></span>
            <span id="code_span" style="font-size: 12px"></span>
        </p>
        <P>
            <input id="btn" type="button" value="登录">
        </P>
    </div>

    <script>
        var userName = document.getElementById("userName"),
            user_span = document.getElementById("user_span"),
            pwd = document.getElementById("pwd"),
            pwd_span = document.getElementById("pwd_span"),
            code = document.getElementById("code"),
            code_create = document.getElementById("code-create");
            code_span = document.getElementById("code_span"),
            btn = document.getElementById("btn");
        // console.log(userName,user_span,pwd,pwd_span,code,code_span,btn)

        // 生成验证码
        function randomcode(){
        var arr = new Array();
        for (var i = 0; i < 4; i++) {
            var a = codeList[Math.floor(Math.random() * 50 + 2)]
            arr.push(a)
        }
        return arr.join("");
        }
        var code_a=randomcode()
        code_create.innerHTML = "<div style='width:60px;height:20px;line-height:20px;border:1px solid black;text-align:center;display:inline-block;vertical-align:top;line-height:18px;font-size:18px;'>" + code_a + "</div>";
        code_create.onclick=function (){
            var code_a=randomcode()
            code_create.innerHTML = "<div style='width:60px;height:20px;line-height:20px;border:1px solid black;text-align:center;display:inline-block;vertical-align:top;line-height:18px;font-size:18px;'>" + code_a + "</div>";   
        }
        // btn.onclick = function () {
        // var name = userName.value
        // if (name != "") {
        //     if (name.length >= 6 && name.length <= 12) {
        //         var start = name.charAt(0);
        //         //   console.log(start);
        //         if (!(numList.includes(name.charAt(0)))) {
        //             var flag = true;
        //             for (var i = 0; i < name.length; i++) {
        //                 if ((allList.includes(name.charAt(i)) == false)) {
        //                     flag = false;
        //                 }
        //             }
        //             if (flag == false) {
        //                 user_span.innerHTML = "字符由数字，字母(大小写)，下划线，$ 组成";
        //                 user_span.style.color = "red";
        //                 user_span.style.fontSize = "12px";
        //             }
        //             else {
        //                 user_span.innerHTML = "输入正确";
        //                 user_span.style.fontSize = "12px";
        //             }

        //         }
        //         else {
        //             user_span.innerHTML = "第一个字符不能为数字";
        //             user_span.style.color = "red";
        //             user_span.style.fontSize = "12px";
        //         }
        //     }
        //     else {
        //         user_span.innerHTML = "用户名需要在6-12位之间";
        //         user_span.style.color = "red";
        //         user_span.style.fontSize = "12px";
        //     }
        // }
        // else {
        //     user_span.innerHTML = "用户名不能为空";
        //     user_span.style.color = "red";
        //     user_span.style.fontSize = "12px"
        // }

        // var pwd_value = pwd.value;
        // // console.log(pwd_value)
        // if (pwd_value != "") {
        //     if (pwd_value.length >= 6 && pwd_value, length <= 12) {
        //         var flag = true;
        //         console.log()
        //         for (var i = 0; i < pwd_value.length; i++) {
        //             if ((allList.includes(pwd_value.charAt(i)) == false)) {
        //                 flag = false;
        //             }
        //         }
        //         if (flag == false) {
        //             pwd_span.innerHTML = "不能含有特殊字符";
        //             pwd_span.style.color = "red";
        //             pwd_span.style.fontSize = "12px"
        //         }
        //         else {
        //             pwd_span.innerHTML = "密码输入正确";
        //             // pwd_span.style.color="red";
        //             pwd_span.style.fontSize = "12px"
        //         }

        //     }
        //     else {
        //         pwd_span.innerHTML = "密码需要在6-12位之间";
        //         pwd_span.style.color = "red";
        //         pwd_span.style.fontSize = "12px"
        //     }
        // }
        // else {
        //     pwd_span.innerHTML = "密码不能为空";
        //     pwd_span.style.color = "red";
        //     pwd_span.style.fontSize = "12px"
        // }

        // var code_value = code.value;
        // // console.log(code_value)
        // if (code_value == code_a) {
        //     code_span.innerHTML = "输入正确";
        //     // code_span.style.color="red";
        //     code_span.style.fontSize = "12px"
        // }
        // else {
        //     code_span.innerHTML = "输入有误";
        //     code_span.style.color = "red";
        //     code_span.style.fontSize = "12px"
        // }

        // var statususer=judgeUser(userName_value).status;
        //     var statuspwd=judgePwd(pwd_value).status;
        //     var statuscode=judgeCode(code_value).status;
        //     if(statususer==true&&statuspwds==true&&statuscode==true){
        //         alert("注册成功");
        //     }
        // }
        
        // 失去焦点
        userName.onblur=function(){
            var userName_value=userName.value;
            var result=judgeUser(userName_value);
            user_span.innerHTML = result.text;
            user_span.style.color = result.color;
            user_span.style.fontSize = result.size;
        }
         pwd.onblur=function(){
            var pwd_value=pwd.value;
            var result=judgePwd(pwd_value);
            pwd_span.innerHTML = result.text;
            pwd_span.style.color = result.color;
            pwd_span.style.fontSize = result.size;
         }
         code.onblur=function(){
            var code_value=code.value;
            console.log()
            var result=judgeCode(code_value);
            code_span.innerHTML = result.text;
            code_span.style.color = result.color;
            code_span.style.fontSize = result.size;
         }
         
         click(userName);
         click(pwd);
         click(code);

         btn.onclick=function (){
            var userName_value=userName.value;
            var pwd_value=pwd.value;
            var code_value=code.value;
            var statususer=judgeUser(userName_value).status;
            var statuspwd=judgePwd(pwd_value).status;
            var statuscode=judgeCode(code_value).status;
            // console.log(statususer,statuspwd,statuscode)
            if(statususer==true&&statuspwd==true&&statuscode==true){
                alert("注册成功");
            }
            if(statususer==false){
                var result=judgeUser(userName_value);
                user_span.innerHTML = result.text;
                user_span.style.color = result.color;
                user_span.style.fontSize = result.size; 
            }
            if(statuspwd==false){
                var result=judgePwd(pwd_value);
                pwd_span.innerHTML = result.text;
                pwd_span.style.color = result.color;
                pwd_span.style.fontSize = result.size;
            }
            if(statuscode==false){
                var result=judgeCode(code_value);
                code_span.innerHTML = result.text;
                code_span.style.color = result.color;
                code_span.style.fontSize = result.size;
            }         
         }
    </script>
</body>

</html>